<template>
  <div class="mt-4">
    <NRow :gutter="24">
      <NCol :span="24">
        <n-card :bordered="true"  title="考勤统计" >
          <BasicForm @register="register"  @submit="handleSubmit" @reset="handleReset" :showAdvancedButton="false"/>
        </n-card>
      </NCol>
    </NRow>
    <NRow :gutter="24">
      <NCol :span="24">
        <n-card content-style="padding: 0;" :bordered="false" :title="title"  >
          <template #header-extra>
            <n-button size="small" type="primary" @click="exportcsv">
              导出考勤数据
            </n-button>
          </template>
          <FluxTrend :parentData="parentData" :key="componentKey"/>
        </n-card>
      </NCol>
    </NRow>
  </div>
</template>
<script lang="ts" setup>
import { ref,toRefs,onMounted } from 'vue';
import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
import { getKinmuym,getProject,exportKinmucsv } from '@/api/dashboard/console';
import FluxTrend from './FluxTrend.vue';

interface selectvalue {
  label: string,
  value: string,
} 
const title = ref('')

const parentData = ref('');
// 创建一个响应式变量 componentKey
const componentKey = ref(0);
const pdata = ref({} as selectvalue);
const ymdata = ref({} as selectvalue);

const schemas: FormSchema[] = [
      {
        field: 'selectproject',
        component: 'NSelect',
        label: '项目',
        componentProps: {
            placeholder: '请选择项目',
            options: pdata,
            onUpdateValue: async (e: any) => {
              if (e != null) {
                ymdata.value = await getKinmuym({project:e});
              }
            },
          },
      },
      {
        field: 'selectKimuYm',
        component: 'NSelect',
        label: '考勤月',
        componentProps: {
            placeholder: '请选择考勤月',
            options: ymdata,
            onUpdateValue: (e: any) => {
              console.log(e);
            },
        },
      },
    ];
    const [register, { getFieldsValue }] = useForm({
      gridProps: { cols: '3 s:3 m:4 l:5 xl:6 2xl:7' },
      labelWidth: 90,
      layout: 'inline',
      schemas,   
    });

  async function getcsvdata() {
    const data = await exportKinmucsv({ key:title.value.replace(" ", ",").replace("考勤统计","") });
    return data;

  }

  function exportcsv() {
    getcsvdata().then((value) => {
      const blob = new Blob([value], { type: 'text/csv;charset=utf-8;' });
      const url = URL.createObjectURL(blob);
      const fileName = title.value.replace(" ", "_").replace("统计","数据") + '.csv';
      let a = document.createElement('a');
      a.download = fileName;
      a.href = url;
      document.body.append(a);
      a.click();
      URL.revokeObjectURL(a.href);
      a.remove();
    });
  };

function handleSubmit(values: Recordable) {
    parentData.value = values.selectproject + ',' + values.selectKimuYm;
    toRefs(parentData);
    title.value = values.selectproject + ' ' + values.selectKimuYm + '考勤统计';
    componentKey.value++;

};

function handleReset(values: Recordable) {
    console.log(values);
}
onMounted(async () => {
  pdata.value = await getProject({project:''});
  ymdata.value = await getKinmuym({project:''});
  title.value = pdata.value[0].label + ' ' + ymdata.value[0].label + '考勤统计';
  
});
</script>
